<template>
  <div class="list" style="overflow:auto;">
    <el-card>
      <!-- 新增试题 -->
      <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <el-button type="success" class="btnright" icon="el-icon-edit"
              @click="$router.push('/questions/new')">新增试题</el-button>
            </div></el-col>
      </el-row>
      <el-form label-position="right" class="formtop" :model="querinfoForm" ref="querinfoForm">
        <el-form-item >
          <el-row
            type="flex"
            class="row-bg"
            justify="space-around"
            :gutter="20"
          >
            <!-- 1 -->
            <el-col :span="6">
              <el-form-item prop="subject">
                <div class="grid-content bgpurple">
                  <span class="ri">学科</span>
                  <template>
                    <el-select
                      v-model="querinfoForm.subject"
                      placeholder="请选择"
                      @change="aaaa"
                    >
                      <el-option
                        v-for="(item, index) in questionsList"
                        :key="index"
                        :label="item.subject"
                        :value="item.catalog"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </div>
              </el-form-item>
            </el-col>
            <!-- 2 -->
            <el-col :span="6">
              <el-form-item prop="catalog">
                <div class="grid-content bgpurple">
                  <span>二级目录</span>
                  <template>
                    <el-select
                      v-model="querinfoForm.catalog"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="(item, index) in questionsListB"
                        :key="index"
                        :label="item"
                        :value="item"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </div>
              </el-form-item>
            </el-col>
            <!-- 3 -->
            <el-col :span="6">
              <el-form-item prop="tags">
                <div class="grid-content bgpurple">
                  <span>标签</span>
                  <template>
                    <el-select v-model="querinfoForm.tags" placeholder="请选择">
                      <el-option
                        v-for="(item, index) in questionsList"
                        :key="item.id"
                        :label="item.tags"
                        :value="index"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </div>
              </el-form-item>
            </el-col>
            <!-- 4 -->
            <el-col :span="6">
              <el-form-item prop="keyword">
                <div class="grid-content bgpurple">
                  <span class="span">关键字</span>
                  <el-input
                    v-model="querinfoForm.keyword"
                    placeholder="根据题干搜获"
                  ></el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <!-- 第一行 -->
        <!-- 第二行 -->
        <el-form-item>
          <el-row
            type="flex"
            class="row-bg"
            justify="space-around"
            :gutter="20"
          >
            <el-col :span="6">
              <el-form-item prop="questionType">
                <div class="grid-content bgpurple">
                  <span class="jiya">试题</span>
                  <template>
                    <el-select
                      v-model="querinfoForm.questionType"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="(item, index) in questionsList"
                        :key="item.id"
                        :label="item.questionType"
                        :value="index"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="difficulty">
                <div class="grid-content bgpurple">
                  <span class="extruding">难度</span>
                  <template>
                    <el-select
                      v-model="querinfoForm.difficulty"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="(item, index) in questionsList"
                        :key="item.id"
                        :label="item.difficulty"
                        :value="index"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="direction">
                <div class="grid-content bgpurple">
                  <span>方向</span>
                  <template>
                    <el-select
                      v-model="querinfoForm.direction"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="(item, index) in questionsList"
                        :key="item.id"
                        :label="item.direction"
                        :value="index"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="creator">
                <div class="grid-content bgpurple">
                  <span class="span">录入人</span>
                  <el-input
                    v-model="querinfoForm.creator"
                    placeholder="根据题干搜获"
                  ></el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <!-- 第三行 -->
        <el-form-item>
          <el-row
            type="flex"
            class="row-bg"
            justify="space-around"
            :gutter="20"
          >
            <el-col :span="6">
              <el-form-item prop="remarks">
                <div class="grid-content bgpurple">
                  <span class="span">题目备注</span>
                  <el-input
                    v-model="querinfoForm.remarks"
                    placeholder="根据题干搜获"
                  ></el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="shortName">
                <div class="grid-content bgpurple">
                  <span class="span">企业简称</span>
                  <el-input
                    v-model="querinfoForm.shortName"
                    placeholder="根据题干搜获"
                  ></el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="province">
                <div class="grid-content bgpurple">
                  <span>城市</span>
                  <!-- 城市 -->
                  <!-- <template> -->
                  <el-select
                    @change="change"
                    class="min"
                    v-model="questionsList.province"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in provinceList"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                  <!-- </template> -->
                  <!-- 县级 -->
                  <template>
                    <el-select
                      class="min"
                      v-model="querinfoForm.citys"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in citysList"
                        :key="item"
                        :label="item"
                        :value="item"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <div class="grid-content bgpurpless">
                  <el-button class="btn" @click="resetForm('querinfoForm')"
                    >取消</el-button
                  >
                  <el-button class="btn" type="primary" @click="seek"
                    >搜索</el-button
                  >
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <!--  -->
      <el-alert :title="'数据一共' + count + '条'" type="info" show-icon>
      </el-alert>
      <!-- 下边列表table  -->
      <template>
        <el-table :data="questionsList" style="width: 100%">
          <el-table-column prop="number" label="试题编号"> </el-table-column>
          <el-table-column prop="subject" label="学科"> </el-table-column>
          <el-table-column prop="catalog" label="目录"> </el-table-column>
          <el-table-column prop="questionType" label="题型">
            <template v-slot="scope">
              <div v-if="scope.row.questionType == 1">单选</div>
              <div v-else-if="scope.row.questionType == 2">双选</div>
              <div v-else>简单</div>
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干">
            <template v-slot="scope">
              <div v-html="scope.row.question"></div>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="200px">
            <template v-slot="scope">
              {{$moment(scope.row.addDate).format("YYYY-MM-DD HH:mm:ss")}}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度">
            <template v-slot="scope">
              <div v-if="scope.row.difficulty == 1">简单</div>
              <div v-else-if="scope.row.difficulty == 2">一般</div>
              <div v-else>困难</div>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人"> </el-table-column>
          <!-- 操作 -->
          <el-table-column type="index" label="操作" width="180px">
            <!-- <template v-slot:default='{slotProps, $index}'> -->
            <template v-slot:default="{ row, $index }">
              <div class="fl">
                <!-- 预览 -->
                <el-tooltip
                  content="预览"
                  effect="dark"
                  placement="top"
                  :enterable="true"
                >
                  <el-button
                    size="small"
                    type="primary"
                    icon="el-icon-view"
                    circle
                    @click="get(row)"
                  >
                  </el-button>
                </el-tooltip>
                <!-- 编辑 -->
                <el-tooltip content="编辑" placement="top" :enterable="true">
                  <el-button
                    size="small"
                    type="success"
                    icon="el-icon-edit"
                    circle
                    @click="TestQuestions(row)"
                  ></el-button>
                </el-tooltip>
                <!-- 删除 -->
                <el-tooltip content="删除" placement="top" :enterable="true">
                  <el-button
                    size="small"
                    type="warning"
                    icon="el-icon-delete"
                    circle
                    content="删除"
                    :enterable="true"
                    @click="delList(row, $index)"
                  ></el-button>
                </el-tooltip>
                <!-- 精选 -->
                <el-tooltip
                  content="加入精选"
                  placement="top"
                  :enterable="true"
                >
                  <el-button
                    size="small"
                    type="danger"
                    icon="el-icon-check"
                    circle
                    @click="addsift(row, $index)"
                  ></el-button>
                </el-tooltip>
              </div>
              <!-- 弹出框 -->
              <el-dialog
                title="题目预览"
                :visible.sync="dialogVisible"
                destroy-on-close
                @close="editDialogClosed"
                width="60%"
              >
                <!-- 头部 -->
                <el-row :gutter="20">
                  <el-col :span="6">
                    <!-- ----------------------- -->
                    <div
                      class="grid-content bg-purple"
                      v-if="popupData.questionType === '1'"
                    >
                      <span>【题型】: 单选题</span>
                    </div>
                    <div
                      class="grid-content bg-purple"
                      v-else-if="popupData.questionType === '2'"
                    >
                      <span>【题型】: 多选题</span>
                    </div>
                    <div class="grid-content bg-purple" v-else>
                      <span>【题型】: 简单</span>
                    </div>
                    <!-- ----------------------- -->
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple">
                      <span>【编号】: {{ popupData.id }}</span>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple">
                      <span
                        >【难度】:
                        {{
                          popupData.difficulty === '1'
                            ? '简单'
                            : popupData.difficulty === '2'
                            ? '一般'
                            : '困难'
                        }}</span
                      >
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple">
                      <span>【标签】: {{ popupData.tags }}</span>
                    </div>
                  </el-col>
                </el-row>
                <!-- 第二行 -->
                <el-row :gutter="20">
                  <el-col :span="6">
                    <div class="grid-content bg-purple">
                      <span>【学科】: {{ popupData.subject }}</span>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple">
                      <span>【目录】: {{ popupData.catalog }}</span>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple">
                      <span>【方向】: {{ popupData.direction }}</span>
                    </div>
                  </el-col>
                </el-row>
                <!-- 中间  //被渲染成题干-->
                <el-row>
                  <el-col :span="24"
                    ><div class="grid-content bg-purple-dark">
                      【题干】:
                    </div></el-col
                  >
                  <!-- 题干的结果 -->
                  <el-col :span="24"
                    ><div class="grid-content bg-purple-dark"></div>
                    <p class="color" v-html="popupData.question"></p>
                  </el-col>
                  <!-- 多选 单选 -->
                  <el-col :span="24"
                    ><div class="grid-content bg-purple-dark">
                      {{
                        popupData.difficulty === '1'
                          ? '单选题'
                          : popupData.difficulty === '2'
                          ? '多选题'
                          : '简单'
                      }}
                      选项：（以下选中的选项为正确答案）
                    </div></el-col
                  >
                  <!-- 选择结果 -->
                  <el-col :span="24"
                    ><div class="grid-content bg-purple-dark">
                      <template>
                        <!-- isRight -->
                        <el-checkbox
                          v-for="(item, index) in abcd"
                          :value="item.isRight"
                          :key="index"
                          >{{ item.title }}</el-checkbox>
                      </template>
                    </div>
                  </el-col>
                </el-row>
                <el-divider></el-divider>
                <!-- 视频 -->
                <!-- <el-row :class="video === true :'gaodu'">  -->
                <el-row :class="[video == true? 'gaodu':'']">
                  <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                      【视频】: <el-button type="danger" @click="delvideog">视频解析</el-button>
                      <template>
                        <div class="demo">
                          <video-player
                          v-if="video == true"
                            :class="[video == true? 'demos video-player vjs-custom-skin': 'video-player vjs-custom-skin']"
                            ref="videoPlayer"
                            :playsinline="true"
                            :options="playerOptions"
                          >
                          </video-player>
                        </div>
                      </template>
                    </div>
                  </el-col>
                </el-row>
                <el-divider></el-divider>
                <!-- 答案解析 -->
                <el-row>
                  <el-col :span="3">
                    <div class="grid-content bg-purple-dark">
                      【答案解析】:
                    </div>
                  </el-col>
                  <el-col :span="20">
                    <div class="grid-content bg-purple-dark">
                      <span class="spantop" v-html="popupData.answer"></span>
                    </div>
                  </el-col>
                </el-row>
                <el-divider></el-divider>
                <!-- 题目备注 -->
                <el-row>
                  <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                      【题目备注】:
                      <span v-html="popupData.remarks"></span>
                    </div>
                  </el-col>
                </el-row>
                <el-divider></el-divider>
                <!-- 控制显示隐藏的按钮 -->
                <span slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="dialogVisible = false"
                    >关闭</el-button
                  >
                </span>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <div class="box">
        <el-pagination
          background
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 20, 50]"
          layout="prev, pager, sizes, next, jumper"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import {
  GetquestionsData,
  siftaddData,
  yulan,
  delData
} from '../../api/list/list'

import { provinces, citys } from '../../../public/citys'
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      // 二级目录
      questionsListB: [],
      // 控制预览的显示
      dialogVisible: false,
      select: '',
      input: '',
      // -------------
      abcd: [],
      // questions 基础题库的列表
      questionsList: [],
      // 初始化一共几条数据
      count: '',
      total: 0,
      // querinfoForm 表单项
      querinfoForm: {
        page: 1,
        pagesize: 5,
        subject: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creator: '',
        catalog: ''
      },
      // 省份
      provinceList: [],
      // 县级
      citysList: [],
      // 预览的选择框
      optionsList: [],
      // 弹框需要的数据
      popupData: {
        // questionType: '',
        // number: ''
      },
      // 视频的配置
      playerOptions: {
        // 播放速度
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        // 如果true,浏览器准备好时开始回放。
        autoplay: false,
        // 默认情况下将会消除任何音频。
        muted: false,
        // 导致视频一结束就重新开始。
        loop: false,
        // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        preload: 'auto',
        language: 'zh-CN',
        // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        aspectRatio: '16:9',
        // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        fluid: true,
        sources: [
          {
            // 类型
            type: 'video/mp4',
            // url地址
            src: ''
          }
        ],
        // 你的封面地址
        poster: '',
        // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          // 全屏按钮
          fullscreenToggle: true
        }
      },
      // 控制视频显示
      video: false
    }
  },
  activated () {},
  watch: {
    // 方法一 : name function () {}
    questionsList () {
      this.count = this.questionsList.length
      // console.log()
      return this.questionsList.length
    }
    // 方法二 : name { 1. handler () {} 此方法可加 2. immediate = true 该回调开始立刻调用 方法一没有}
  },
  created () {
    // 初始化数据
    this.getquestions()
    this.provinceList = provinces()
  },
  mounted () {},
  methods: {
    async getquestions () {
      const { data } = await GetquestionsData(this.querinfoForm)
      this.questionsList = data.items
      // var str = '数据一共' +  + '条'
      this.count = data.items.length
      this.total = data.items.length
    },
    handleSizeChange (val) {
      // 获取几页数据
      this.querinfoForm.pagesize = val
      this.getquestions()
    },
    handleCurrentChange (val) {
      this.querinfoForm.page = val
      this.getquestions()
    },
    // 城市
    change (val) {
      // 调用二级
      this.citysList = citys(val)
    },
    // 搜索
    async seek () {
      this.getquestions(this.querinfoForm)
      this.$message.success('搜索成功')
      this.resetForm()
    },
    // 重置数据
    resetForm (formName) {
      this.$refs.querinfoForm.resetFields()
    },
    aaaa (val) {
      this.questionsListB = []
      this.questionsListB.push(val)
    },
    // 显示弹出框
    async get (val) {
      const { data: res } = await yulan(val.id)
      this.popupData = res
      // 数据清空
      this.abcd = []
      this.popupData.options.forEach(item => {
        // console.log(item.title)
        this.abcd.push({
          isRight: Boolean(item.isRight),
          title: item.title
        })
      })
      // 修改视频路径
      this.playerOptions.sources[0].src = this.popupData.videoURL
      // videoURL
      this.dialogVisible = true
    },
    // 添加精选
    async addsift (val, index) {
      var present = await this.$confirm('确认加入精选题库', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err) // 调用 catch来捕捉错误数据
      if (present !== 'confirm') return this.$message.info('取消删除成功!')
      await siftaddData(val)
      // 重新渲染数据
      this.getquestions()
      this.$message({ type: 'success', message: '添加成功' })
    },
    // 删除
    async delList (val) {
      var present = await this.$confirm('确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err) // 调用 catch来捕捉错误数据
      if (present !== 'confirm') return this.$message.info('取消删除成功!')
      this.$message({ type: 'success', message: '删除成功' })
      await delData(val.id)
      this.getquestions()
    },
    // 播放视频
    delvideog () {
      this.video = true
    },
    // 弹窗关闭
    editDialogClosed (val) {
      this.video = false
    },
    // 编辑
    async TestQuestions (val) {
      // 动态参数
       this.$router.push(`/questions/new?id=${val.id}`)
    }
  },
  // 计算属性
  computed: {}
}
</script>
<style scoped lang="less">
.formtop {
  margin-top: 10px;
}
.btnright {
  position: absolute;
  right: 0;
  margin-bottom: 10px;
}
.gaodu {
  height: 350px;
}
.demos {
  z-index: 1;
}
 .demo{
   z-index: -1;
    display: inline-block;
    width: 500px;
    height: 280px;
    text-align: center;
    line-height: 100px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    display: block;
    // display: none;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-right: 4px;
  }
.spantop p {
  margin-bottom: 5px;
}
.color {
  color: rgb(13, 162, 221);
}
/deep/.el-dialog__footer {
  text-align: center;
}
/deep/.el-dialog__header {
  background: #409eff;
  border-radius: 9px 9px 0 0;
}
/deep/.el-dialog {
  border-radius: 9px 9px 0 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0);
}
/deep/.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
/deep/.el-dialog__title {
  color: #fff;
}
.fl {
  display: flex;
}
.el-card__body {
  height: 500px;
}
.bgpurpless {
  display: flex;
  position: absolute;
  right: 0;
}
.min {
  width: 100px;
  margin-left: 10px;
}
.el-col {
  height: 42px;
  line-height: 42px;
}
.bgpurple {
  display: flex;
}
span {
  widows: 80px;
  margin-right: 10px;
  font-weight: 700;
  box-sizing: border-box;
}
.span {
  text-align: right;
  width: 80px;
}
.jiya:after {
  content: '类型';
  // margin-left: -32px;
}
.extruding {
  text-align: right;
  margin-left: 30px;
  // padding-right: 32px;
}
.ri {
  margin-left: 28px;
}

.box {
  height: 200px;
}
</style>
